<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/sockjs.js"></script>
    <script src="js/stomp.js"></script>
    <title></title>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            overflow: hidden;
            min-width: 670px !important;
            background-color: #dce8ed !important;
            font-family: "Microsoft YaHei", "Microsoft JhengHei", "NSimSun", "PMingLiU", "DFKai-SB", "KaiTi";
        }

        ul {
            list-style: none;
            padding-left: 0;
            height: auto;
        }

        h3 {
            font-weight: bold;
        }

        .header {
            padding: 0;
            border-bottom: 1px solid darkgray;
            margin: 0 20px;
        }

        .header .col-lg-4 {
            padding: 0;
            text-align: center;
        }

        .header .logo {
            height: 100px;
            background-image: url("./img/logo.png");
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
        }

        .header .title {
            position: relative;
            background-image: -webkit-linear-gradient(top, #eee, skyblue);
            color: #348299;
            height: 90px;
            border-bottom-left-radius: 100px;
            border-bottom-right-radius: 100px;
            overflow: hidden;
        }

        .header .title h3 {
            margin: 0;
            position: absolute;
            top: 20px;
            width: 100%;
            left: 0;
            text-align: center;
            display: inline-block;
            font-size: 50px;
            font-weight: bold;

        }

        .header .timeRight {

        }

        .header .time {
            position: relative;
            text-align: left;
            width: 300px;
            font-size: 25px;
            margin: 25px auto 0;
            background-color: #ccf3f0;
            padding: 5px;
            border: 1px solid #147e3a;
            border-radius: 10px;
            margin-bottom: 10px;
            color: #348299;
            font-weight: bold;

        }

        .header .time span {
            position: absolute;
            right: -107px;
            display: block;
            background-color: #07a09d;
            padding: 6px 5px;
            top: -1px;
            color: #f5f5f5;
            border-radius: 10px;
        }

        .header .title h1 {
            margin: 0;
            line-height: 100px;
        }

        .content {
            padding-top: 20px;
        }

        .content .latest {
            background-color: #147e3a;
            margin: 0 20px;
            border-radius: 10px;
        }

        .content .latest h3 {
            height: 30px;
            line-height: 30px;
            color: #fdffc0;
            margin: 15px 0 15px 40px;
            font-weight: bold;
            font-size: 35px;
        }

        .content .latest h3 span {
            width: 25px;
            height: 25px;
            background-color: white;
            border-radius: 50%;
            display: inline-block;
            box-shadow: 0 0 28px orangered inset;
            margin-right: 15px;
        }

        .content .latest h3 p#userInfo {
            display: inline;
        }

        .content .room {
            margin: 0 20px 0;

        }

        .content .room .h-title {
            margin-top: 10px;
            margin-bottom: 10px;
        }

        .roomName .wait {
            width: 100px;
            margin-right: 10px;
        }

        .roomName .wait h3 {
            margin: 0;
            width: 100px;
            box-sizing: border-box;
            background-image: -webkit-linear-gradient(top, #eee, skyblue);
            color: #348299;
            font-size: 30px;
            border-radius: 10px;
        }

        .infoList {
            box-shadow: 0 0 10px 1px #9d9d9d inset;
            border-radius: 10px;
            padding: 0;
            overflow: hidden;
            background-color: #8ed0db;

        }

        .infoList li {
            padding: 0;
        }

        .infoList h3 {
            text-align: center;
            margin: 0;

        }

        .h-title {
            background-color: #8ed0db;
            box-shadow: 0 0 10px 1px #9d9d9d inset;
            border-radius: 10px;
            padding: 0;
        }

        .h-title div {
            padding: 0;
        }

        .h-title h3 {
            text-align: center;
            margin: 0;
        }

        .footer {
            position: fixed;
            bottom: 10px;
            left: 35px;
            right: 35px;
            background-color: #147e3a;
            min-width: 670px !important;
            border-radius: 10px;
        }

        .footer-content {
            padding: 0;
        }

        .footer-content h3 {
            height: 60px;
            line-height: 60px;
            color: #fdffc0;
            margin: 0;
            font-size: 35px;
        }

        .footer-content h3 span {
            width: 25px;
            height: 25px;
            background-color: white;
            border-radius: 50%;
            display: inline-block;
            box-shadow: 0 0 50px orangered inset;
            margin-left: 23px;
            margin-right: 15px;
        }

        #disconnect {
            display: none;
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            z-index: 9999;
            background-color: rgba(0, 0, 0, .5);

        }

        #disconnect h3 {
            position: absolute;
            width: 300px;
            height: 150px;
            line-height: 150px;
            color: red;
            background-color: #f5f5f5;
            border-radius: 10px;
            text-align: center;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            margin: auto;
        }

        .call-active {
            color: red;
            background: lightskyblue;

        }
    </style>
</head>
<body>
<div id="disconnect">
    <h3>网络异常 ......</h3>
</div>
<div class="wrap">
    <div class="container-fluid header">
        <div class="col-lg-4  col-md-4 col-sm-4 col-xs-4">
            <div class="logo">
            </div>
        </div>
        <div class="col-lg-4  col-md-4 col-sm-4 col-xs-4 title">
            <h3 id="checkRoom"></h3>
        </div>
        <div class="col-lg-4  col-md-4 col-sm-4 col-xs-4  timeRight">
            <div class="time" id="year">

            </div>
        </div>
    </div>
    <div class="container-fluid content">
        <div class="row latest">
            <h3><span></span>当前检查的患者: <p id="userInfo"></p></h3>
        </div>
        <div class="row room">
            <div class="col-lg-12 h-title">
                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"><h3>排队号</h3></div>
                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"><h3>姓名</h3></div>
                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"><h3>等待人数</h3></div>
                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"><h3>检查状态</h3></div>
            </div>
            <div class="detailRoom">

            </div>
        </div>
    </div>
    <div class="container-fluid footer">
        <div class="footer-content">
            <h3><span></span>请其他患者在大厅候诊区耐心等待</h3>
        </div>
    </div>
</div>
<script>
    //底部显示的定时器的开关
    var bottomTimer = null;
    // 信息显示Timer
    var showTimer;
    //处理底部显示的顺序
    var bottomIndex = 0;
    //过号存储数据
    var guoArr = [];
    //已经呼号存储数据
    var callArr = [];
    //显示数据的容器
    var showData = [];
    //单个科室的全部数据
    var dataAll = [];
    // 当前呼叫的患者队列号
    var nowCallQueueId = null;

    // 显示数据的起始位置
    var indexPage = 0;
    // 显示的数据
    var arrShow = [];
    // 设置显示科室名称(从客户端读取)
    var data = {
        clientName: "",
        checkRoomId: "",
        deptId: "",
        clientId: "",
        clientType: ""
    };

    // 显示时间
    setInterval(function () {
        var time = new Date();
        var year = time.getFullYear();
        var month = parseInt(time.getMonth()) + 1;
        month = month < 10 ? '0' + month : month;
        var date = time.getDate();
        date = date < 10 ? '0' + date : date;
        var hour = time.getHours();
        hour = hour < 10 ? '0' + hour : hour;
        var second = time.getSeconds();
        second = second < 10 ? '0' + second : second;
        var minute = time.getMinutes();
        minute = minute < 10 ? '0' + minute : minute;
        var day = this.showDay(parseInt(time.getDay()));

        $("#year").html(year + '年' + month + '月' + date + '日' + ' ' + day);
        $("#year").html($("#year").html() + "<span>" + hour + ':' + minute + ':' + second + "</span>")
    }, 1000);

    function showDay(week) {
        if (week === 0) {
            return "星期天";
        } else if (week === 1) {
            return "星期一";
        } else if (week === 2) {
            return "星期二";
        } else if (week === 3) {
            return "星期三";
        } else if (week === 4) {
            return "星期四";
        } else if (week === 5) {
            return "星期五";
        } else if (week === 6) {
            return "星期六";
        }
    }

    // 调整高度
    resizeHeight();

    // 初始化页面
    function resizeHeight() {
        $(".detailRoom").html('');
        for (var i = 0; i < 10; i++) {
            var ul = "<ul class='col-lg-12 infoList'>" +
                "<li class='col-lg-3 col-md-3 col-sm-3 col-xs-3 info'><h3></h3></li>" +
                "<li class='col-lg-3 col-md-3 col-sm-3 col-xs-3 info'><h3></h3></li>" +
                "<li class='col-lg-3 col-md-3 col-sm-3 col-xs-3 info'><h3></h3></li>" +
                "<li class='col-lg-3 col-md-3 col-sm-3 col-xs-3 info'><h3></h3></li>" +
                "</ul>";
            $(".detailRoom").append(ul);
        }
        SetCss();
    }

    // 设置高度
    function SetCss() {
        var screenHeight = document.body.clientHeight || document.documentElement.clientHeight;
        screenHeight = screenHeight - 370;
        var contentHeight = (screenHeight) / 11;

        $(".infoList").css('height', contentHeight + "px");
        $(".room .h-title").css('height', contentHeight + "px");
        $(".room h3").css('height', contentHeight + "px").css("fontSize", contentHeight * .7 + "px").css("lineHeight", contentHeight + "px");
    }

    /**
     * 捕获异常
     */
    // window.onerror = function () {
    //     alert(arguments[0]);
    //     // 阻止在控制台中打印错误信息
    //     return true;
    // };

    /**
     * 页面加载完成后读取配置信息
     */
    $(document).ready(function () {
        //定时执行，3秒后执行
        var t1 = window.setTimeout(refreshCount, 1000 * 3);

        function refreshCount() {
            // 获取配置文件信息
            getClientProperties();
            //去掉定时器
            window.clearTimeout(t1);
        }
    });

    // 读取客户端配置文件
    function getClientProperties() {
        // var properties = app.getClientProperties();
        var properties = '{"clientType":"1","clientId":"86e28557-dbe7-46b4-bf5c-174c4b038a00","clientName":"放射科","deptId":"外科楼超声","checkRoomId":"彩超一室"}';
        var _properties = eval("(" + properties + ")");
        window.g_properties = _properties;

        data.clientName = _properties.clientName;
        data.checkRoomId = _properties.checkRoomId;
        data.deptId = _properties.deptId;

        $("#checkRoom").html(data.clientName || "");

        // 读取缓存的数据
        getQueueData();
        // 初始化websocket
        initWebSocket();
    }

    // 初始获取缓存队列里的信息
    function getQueueData() {
        $.ajax({
            //配置文件里面的id
            // url: "http://192.168.0.60:8080/queue/cacheCheckRoom?deptId=" + data.deptId + "&checkRoomId=" + data.checkRoomId,
            url: "/queue/cacheCheckRoom?deptId=" + data.deptId + "&checkRoomId=" + data.checkRoomId,
            type: "GET",
            success: function (result) {
                if (result.data.length > 0) {
                    for (var i = 0; i < result.data.length; i++) {
                        // 待检测
                        if (result.data[i].checkStatus === 0) {
                            showData.push(result.data[i]);
                        }
                        // 过号
                        if (result.data[i].checkStatus === 1) {
                            guoArr.push(result.data[i]);
                        }
                        // 已检查
                        if (result.data[i].checkStatus === 2) {
                            callArr.push(result.data[i])
                        }
                        // 所有数据集合
                        dataAll.push(result.data[i]);
                    }
                    console.log(dataAll);
                    // SetAllData();
                    // 底部显示过号信息
                    bottomShow();
                    // 显示数据
                    showDataTal();
                }
            },
            error: function (result) {
                console.log(result);
            }
        });
    }

    // 底部过号信息显示
    function bottomShow() {
        clearInterval(bottomTimer);
        if (guoArr.length > 0) {
            bottomTimer = setInterval(function () {
                if (bottomIndex >= guoArr.length) {
                    bottomIndex = 0;
                }
                $('.footer-content h3').html("<h3><span></span>当前过号信息: " + guoArr[bottomIndex].queueId + ' ' + guoArr[bottomIndex].patientName + "</h3>");
                bottomIndex++;
            }, 3000);
        }
        else {
            bottomTimer = null;
            var html = "<h3><span></span>请其他患者在大厅候诊区耐心等待</h3>";
            $('.footer-content h3').html(html);
        }
    }

    // 数据显示操作函数
    function showDataTal() {
        var data2 = [];
        showData.forEach(function (item) {
            // 如果有值
            if (item.queueId) {
                data2.push(item)
            }
        });
        showData = data2;
        // 关闭定时器
        clearInterval(showTimer);
        var ceil3 = Math.ceil(showData.length / 10) || 1;
        // showData必须是10的倍数
        while (showData.length < ceil3 * 10) {
            showData.push({
                "queueId": "",
                "patientName": "",
                "patientSex": "",
                "patientAge": "",
                "inspectId": "",
                "imageNumber": "",
                "department": "",
                "departmentId": "",
                "checkRoom": "",
                "checkId": "",
                "checkRoomDisplayName": "",
                "waitPatientNumber": "",
                "className": "",
                "cliisinpat": "",
                "checkInTime": "",
                "checkStatus": "",
                "confirmTime": ""
            })
        }

        // 先展示数据
        dataShow();

        // 15s后开始翻屏
        showTimer = setInterval(dataShow, 15000);

        // 数据显示
        function dataShow() {
            // 获取总页数
            var ceilAll = Math.ceil(showData.length / 10);
            // 获取当前页的数据
            arrShow = showData.slice(indexPage * 10, indexPage * 10 + 10);
            // 下一页
            indexPage++;
            // 如果到最后一页
            if (indexPage >= ceilAll || indexPage < 0) {
                indexPage = 0;
            }
            // 页面清空
            $(".detailRoom").html('');
            // 重绘页面
            for (var i = 0; i < arrShow.length; i++) {
                var ul = "<ul class='col-lg-12 infoList' userId='queueId" + arrShow[i].queueId + "' >" +
                    "<li class='col-lg-3 col-md-3 col-sm-3 col-xs-3 info'><h3>" + arrShow[i].queueId + "</h3></li>" +
                    "<li class='col-lg-3 col-md-3 col-sm-3 col-xs-3 info'><h3>" + arrShow[i].patientName + "</h3></li>" +
                    "<li class='col-lg-3 col-md-3 col-sm-3 col-xs-3 info'><h3>" + arrShow[i].waitPatientNumber + "</h3></li>" +
                    "<li class='col-lg-3 col-md-3 col-sm-3 col-xs-3 info'><h3>" + checkStatus(arrShow[i].checkStatus) + "</h3></li>" +
                    "</ul>";
                $(".detailRoom").append(ul);
            }

            // console.log(nowCallQueueId);
            // console.log($("#queueId" + nowCallQueueId));
            // 当前呼叫的患者字体颜色变红
            $("#queueId" + nowCallQueueId).addClass("call-active");

            // 设置边距
            SetCss();
        }
    }

    // webSocket初始haul
    function initWebSocket() {
        connection();
    }

    // webSocket连接
    function connection() {
        // 建立连接对象
        var timer;
        // var socket = new SockJS('http://192.168.0.60:8080/zd-queuing-websocket');
        var socket = new SockJS('/zd-queuing-websocket');
        // 获取STOMP子协议的客户端对象
        var stompClient = Stomp.over(socket);
        // 定义客户端的认证信息,按需求配置
        var headers = {
            Authorization: ''
        };
        // 向服务器发起websocket连接
        stompClient.connect({},
            function () {
                $("#disconnect").hide();
                if (timer) {
                    clearInterval(timer);
                }
                stompClient.subscribe('/call/checkRoom/' + data.checkRoomId, function (msg) {
                    // 呼号就直接展示数据,不做任何操作
                    var personObj = JSON.parse(msg.body);
                    if (personObj.checkRoomId === data.checkRoomId) {
                        // 从检查完毕队列选择呼叫
                        callArr.forEach(function (item) {
                            if (item.queueId === personObj.queueId) {
                                // 语音播报
                                console.log("呼叫-called" + item.patientName + item.queueId + personObj.checkRoom);
                                // alert("呼叫-called" + item.patientName + item.queueId + personObj.checkRoom);
                                // app.startVoice(item.patientName, item.queueId, personObj.checkRoom);
                            }
                        });
                        //从过号队列选择呼叫
                        guoArr.forEach(function (item) {
                            if (item.queueId === personObj.queueId) {
                                // 语音播报
                                console.log("呼叫-over" + item.patientName + item.queueId + personObj.checkRoom);
                                // alert("呼叫-over" + item.patientName + item.queueId + personObj.checkRoom);
                                // app.startVoice(item.patientName, item.queueId, personObj.checkRoom);
                                for (var i = 0; i < showData.length; i++) {
                                    if (showData[i].queueId) {
                                        showData[i].checkStatus = 0;
                                    }
                                }
                            }
                        });
                        //正常操作
                        showData.forEach(function (item, index) {
                            if (personObj.queueId === item.queueId) {
                                // 语音播报
                                console.log("呼叫-show" + item.patientName + item.queueId + personObj.checkRoom);
                                // alert("呼叫-show" + item.patientName + item.queueId + personObj.checkRoom);
                                // app.startVoice(item.patientName, item.queueId, personObj.checkRoom);
                                for (var i = 0; i < showData.length; i++) {
                                    if (showData[i].queueId) {
                                        showData[i].checkStatus = 0;
                                    }
                                }
                                showData[index].checkStatus = 4;
                                // 回到首页
                                indexPage = 0;
                                // 当前呼叫的患者
                                nowCallQueueId = personObj.queueId;
                                // 重绘页面
                                showDataTal();
                            }
                        });
                        // 显示播报内容
                        $("#userInfo").html(personObj.queueId + " " + personObj.patientName + "到" + personObj.checkRoom + "就诊");
                    }
                });
                stompClient.subscribe('/pass/checkRoom/' + data.checkRoomId, function (msg) {
                    var queueId = msg.body;
                    showData.forEach(function (item, index) {
                        if (queueId === item.queueId) {
                            // 加入到过号队列
                            guoArr.push(item);
                            bottomShow();
                            // 显示队列删除当前记录
                            showData.splice(index, 1);
                            // 修改等待队列的等待人数 从当前记录开始
                            for (var i = index; i < showData.length; i++) {
                                if (showData[i].queueId) {
                                    showData[i].waitPatientNumber = showData[i].waitPatientNumber - 1;
                                }
                            }
                            // 操作显示界面的函数
                            showDataTal();
                        }
                    });
                });
                stompClient.subscribe('/finish/checkRoom/' + data.checkRoomId, function (msg) {
                    var queueId = msg.body;
                    //从过号队列里面选择的呼号完成就诊 删除过号队列对应的数据
                    guoArr.forEach(function (item, index) {
                        if (item.queueId === queueId) {
                            // 往已呼队列插入数据
                            callArr.push(item);
                            // 从过号队列中删除当前记录
                            guoArr.splice(index, 1);
                            // 底部动画函数
                            bottomShow();
                        }
                    });
                    showData.forEach(function (item, index) {
                        if (queueId === item.queueId) {
                            // 往已呼队列插入数据
                            callArr.push(item);
                            // 从显示队列中删除
                            showData.splice(index, 1);
                            // 修改当前等待人数
                            for (var i = index; i < showData.length; i++) {
                                if (showData[i].queueId) {
                                    showData[i].waitPatientNumber = showData[i].waitPatientNumber - 1;
                                }
                            }
                            //操作显示界面的函数
                            showDataTal();
                        }
                    });
                });
                stompClient.subscribe('/newPatient/checkRoom/' + data.checkRoomId, function (msg) {
                    var data = JSON.parse(msg.body);
                    data.forEach(function (item) {
                        // 添加到展示队列
                        showData.push(item);
                        // 添加到所有患者信息
                        dataAll.push(item);
                    });
                    // 页面刷新
                    showDataTal();
                });
                stompClient.subscribe('/zd-call/cleanCache', function () {
                    window.location.reload();
                    // clearInterval(bottomTimer);
                    // clearInterval(timer);
                    // $('.footer-content h3').html("<h3><span></span>请其他患者在大厅候诊区耐心等待</h3>");
                    // $("#userInfo").html('');
                    // showData = [];
                    // guoArr = [];
                    // callArr = [];
                    // showDataTal();
                })
            },
            function (err) {
                $("#disconnect").show();
                $('.footer-content h3').html("<h3><span></span>请其他患者在大厅候诊区耐心等待</h3>");
                $("#userInfo").html('');
                showDataTal();
                timer = setInterval(function () {
                    window.location.reload();
                }, 2000)
            });
    }

    // 检测状态变化 数字->中文
    function checkStatus(status) {
        if (status === 0) {
            return "等待检查"
        }
        else if (status === 1) {
            return "已过号"
        }
        else if (status === 2) {
            return "检查完毕"
        }
        else if (status === 4) {
            return "正在检查"
        }
        else return ""
    }
</script>
</body>
</html>